import React, { Component } from 'react'
import Home from './views/Home'
import List from './views/List'
import Shop from './views/Shop'
import My from './views/My'
import E404 from './views/404'
import { BrowserRouter, HashRouter, Route, Redirect, Switch, withRouter } from 'react-router-dom'
import { NavLink } from 'react-router-dom/cjs/react-router-dom.min'
import './App.css'
import Navcom from './views/navcom'
import Details from './views/details'
/* 
路由提供的组件?
1.BrowserRouter,HashRouter:路由根容器 提供路由机制,区分路由模式
2.Route:配置路由规格 显示路由组件
3.Redirect:路由重定向 from='/来源路径' to='/目标路径'
4.Switch 唯一路由 匹配成功就停止遍历

路由跳转: 
1.声明式: Link | NavLink
2.编程式
NavLink自带高亮样式 active

NavLink自带样式属性:
activeClassName:修改外部 样式名
activeStyle:添加行内样式

路由信息对象
1.history:提供路由跳转的方法 
2.location:提供path信息 state search传参数1
3.match：提供url信息 动态路由参数 

//获取路由信息对象？
1.通过Route配置的组件 组件的props自带路由信息对象
2.没有通过Route配置的组件 使用withRouter获取到路由信息对象

路由匹配规则?
1.模糊匹配(包含匹配) 
2.匹配成功不停止遍历
把所有的Route配置形成一个数组[{path,component}]

解决模糊匹配:精准琵琶 exact === 全等匹配

解决匹配成功不停止遍历
*/

class App extends Component {
  render() {
    return (
      <div>App
        <Switch>
          {/*   <Route path='/' exact component={Home} /> */}
          <Route path='/home' component={Home} />
          <Route path='/list' component={List} />
          <Route path='/details/:id' component={Details}/>
          <Route path='/shop' component={Shop} />
          <Route path='/my' component={My} />
          <Route path='/404' component={E404} />
          <Redirect from='/' exact to='/home' />
          <Redirect to='/404' />
        </Switch>
        <div>
          <NavLink to='/home'>首页</NavLink>
          <NavLink to={{ pathname: '/list' }}>列表</ NavLink>
          <NavLink to='/shop'>购物车</NavLink>
          <NavLink to={{ pathname: '/my' }}>我的</NavLink>
        </div>
        <Navcom></Navcom>
        <div>
          <span onClick={() => {
            this.props.history.push('/shop')
          }}>购物车</span>
        </div>
      </div>
    )
  }
}

export default withRouter(App)
